import React, { useEffect, useState } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Col, Layout, Menu, Row, Tree, TreeDataNode, TreeProps } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { getAdminRoleAll } from '@/services/adminRoleService'
import { Header } from 'antd/lib/layout/layout';

const { Content, Sider } = Layout;

const MenuPage: React.FC<unknown> = () => {
  const [selectedMenu, setSelectedMenu] = useState<string>('');
  const [roleList, setRoleList] = useState<AdminRoleType.AdminRole[]>([]);

  const loadRoleList = async () => {
    const { Items } = await getAdminRoleAll();
    setSelectedMenu(Items[0].Id.toString());
    setRoleList(Items);
  }

  const roleSelect = async (item: any) => {
    console.log(item);
  }

  const treeData: TreeDataNode[] = [
    {
      title: '系统管理',
      key: '0-0',
      children: [],
    },
  ];

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  useEffect(() => {
    loadRoleList();
  }, [])

  return (
    <PageContainer>
      <Layout>
        <Content>
          <Layout
          >
            <Sider style={{ backgroundColor: 'white' }} width={200}>
              {selectedMenu ?
                <Menu
                  title='角色列表'
                  mode="inline"
                  defaultOpenKeys={['sub1']}
                  style={{ height: '100%' }}
                  onSelect={roleSelect}
                  defaultSelectedKeys={[selectedMenu]}
                  items={roleList?.map(r => {
                    return {
                      key: r.Id,
                      label: r.Name,
                      icon: <UserOutlined />,
                    }
                  })}
                /> : null}
            </Sider>
            <Content style={{ padding: '0 24px', marginLeft: '10px', minHeight: 280, backgroundColor: '#fff' }}>
              <Tree
                style={{ padding: '10px 0px' }}
                checkable
                defaultExpandedKeys={['0-0-0', '0-0-1']}
                defaultSelectedKeys={['0-0-0', '0-0-1']}
                defaultCheckedKeys={['0-0-0', '0-0-1']}
                onSelect={onSelect}
                onCheck={onCheck}
                treeData={treeData}
              />
              <Row style={{ width: '50%', marginLeft: '30px' }}>
                <Col span={6}> <input type='checkbox' /> 新增</Col>
                <Col span={6}> <input type='checkbox' /> 编辑</Col>
                <Col span={6}> <input type='checkbox' /> 删除</Col>
                <Col span={6}> <input type='checkbox' /> 查看</Col>
              </Row>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </PageContainer>
  )
}

export default MenuPage;
